<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        img{
            vertical-align: top;
        }

        ul {
            list-style: none;
        }
        .scroll {
            overflow: hidden;
            width: 500px;
            margin:10px auto;
            position: relative;
            border-radius: 5px;
        }

        .scroll ul {
            width: 400%;
            overflow: hidden;
            position: relative;
            top: 0;
            left: 0;
        }

        .scroll ul li{
            float: left;
        }
    </style>
    <script>
        window.onload = function () {
            var ul = document.getElementsByClassName("scroll")[0].children[0];
            var num = 0;
            setInterval(function () {
                num--;
                if (num <= -1200){
                    ul.style.left = 0;
                    num = 0;
                }else {
                    ul.style.left = num +"px";
                }
            },30);
        }
    </script>
</head>
<body>
    <div class="scroll">
            <ul>
                <li><img src="images/01.jpg" alt=""></li>
                <li><img src="images/02.jpg" alt=""></li>
                <li><img src="images/03.jpg" alt=""></li>
                <li><img src="images/04.jpg" alt=""></li>

                <li><img src="images/01.jpg" alt=""></li>
                <li><img src="images/02.jpg" alt=""></li>
            </ul>
    </div>

</body>
</html>